This is an example of the kind of role-independent styling I would like
to do on datawrapper graphics, by matching on the URL of the interactive
element.

This is an example of the kind of role-dependent styling I would like to
make for datawrapper graphics.

Relative links work well locally in text editors and on github, whereas
an absolute link like this can be mildly frustrating when following from
a text editor.

This 32px margin collapses with the existing 16px paragraph spacing.
What about breakpoints? (Should I be using spacing constants? Probably)

This palette colour both matches the hex colour I had manually used, and
seems like the most appropriate “border” colour listed in the file.
Hopefully it’s a good choice: I must remember to ask in the PR.

Also, looking at this has reminded me that I should check how my styling
looks in dark mode!

For roles which move the graphics across the border on the side, we’d
like to add a bottom border to avoid the odd reappearance of the side
border after the graphic.

These margins were too small: the request from the visuals team is that
they be 32px.

I’ve added a story with a Datawrapper embed for each role, to have an
easy way to look at the styling.

I’ve also tweaked the Wrapper used in the InteractiveBlockComponent
stories to match that used in the Figure stories. Since the layouts are
similar, I think this should be fine?

I had misunderstood some of the desired padding, and accidentally
included the bottom border even at mobile breakpoints.

Now the top and bottom margins are the same in the mobile breakpoint for
supporting, inline, showcase, and immersive roles, for datawrapper
graphics.